<script>
export default {
  name: 'AuthLayout'
}
</script>

<template>
  <div>
    <el-card class="box-card flex-row-center" shadow="hover">
      <div class="flex-col-center">
        <i class="el-icon-circle-plus-outline icon"></i>
        <div class="text">添加公众号</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff;">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div><i class="el-icon-position"></i> 任务包</div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div><i class="el-icon-bell"></i> 消息宝</div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff;">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div><i class="el-icon-position"></i> 任务包</div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div><i class="el-icon-bell"></i> 消息宝</div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff;">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div><i class="el-icon-position"></i> 任务包</div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div><i class="el-icon-bell"></i> 消息宝</div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff;">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div><i class="el-icon-position"></i> 任务包</div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div><i class="el-icon-bell"></i> 消息宝</div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff;">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div><i class="el-icon-position"></i> 任务包</div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div><i class="el-icon-bell"></i> 消息宝</div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

  </div>
</template>

<style scoped>
.box-card {
  width: 240px;
  height: 260px;
  float: left;
  margin: 20px;
}

.box-item {
  display: flex;
}

.box-item .item {
  padding: 5px 0;
}

.box-item .small {
  font-size: 14px;
  padding: 10px 0;
  color: #646464;
}

.box-item .date {
  font-size: 13px;
  color: #908e8e;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box-card .icon {
  font-size: 50px;
}

.box-card .text {
  font-size: 14px;
  margin-top: 8px;
}

.el-divider--horizontal {
  margin: 18px 0;
}
</style>